<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小镇商店 - 镇长日志</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../js/core.js"></script>
    <!-- 购物车相关函数 -->
    <script>
        // 购物车相关函数
        function getCart() {
            const cartStr = localStorage.getItem('cart');
            return cartStr ? JSON.parse(cartStr) : [];
        }
        
        function updateCart(cartData) {
            localStorage.setItem('cart', JSON.stringify(cartData));
        }
        
        function addToCart(product) {
            const cart = getCart();
            const existingItem = cart.find(item => item.id === product.id);
            
            if (existingItem) {
                // 如果商品已存在，增加数量
                existingItem.quantity = (existingItem.quantity || 1) + 1;
            } else {
                // 添加新商品
                cart.push({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    image: product.image,
                    quantity: 1
                });
            }
            
            updateCart(cart);
        }
        
        function removeFromCart(productId) {
            const cart = getCart();
            const initialLength = cart.length;
            const filteredCart = cart.filter(item => item.id !== productId);
            
            // 检查是否有商品被移除（商品是否存在于购物车中）
            if (filteredCart.length < initialLength) {
                updateCart(filteredCart);
                return true; // 成功删除
            } else {
                return false; // 商品不存在于购物车中
            }
        }
    </script>
    <!-- 引入拆分后的CSS文件 -->
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/layout.css">
    <link rel="stylesheet" href="../../css/components.css">
    <link rel="stylesheet" href="../../css/pages/common.css">
    <link rel="stylesheet" href="../../css/pages/shop.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2D6A4F',     // 自然绿色 - 主色调
                        secondary: '#95D5B2',   // 浅绿色 - 辅助色
                        accent: '#FFB703',      // 琥珀色 - 强调色
                        danger: '#E63946',      // 红色 - 危险色
                        success: '#4CAF50',     // 绿色 - 成功色
                        warning: '#FF9800',     // 橙色 - 警告色
                        dark: '#1B263B',        // 深蓝色 - 文字色
                        light: '#F8F9FA',       // 浅色 - 背景色
                        earth: '#8B4513',       // 土色 - 建筑相关
                        wood: '#DEB887',        // 木材色
                        food: '#8BC34A',        // 食物色
                        people: '#F08080'       // 人口色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    backgroundImage: {
                        'village-bg': "url('https://picsum.photos/id/1043/1920/1080')",
                    }
                },
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans text-dark min-h-screen flex flex-col">
    <!-- 游戏背景 -->
    <div class="fixed inset-0 z-0 opacity-10 bg-cover bg-center bg-village-bg"></div>
    <!-- 导航栏 -->
    <nav id="game-navbar" class="bg-primary/95 text-white shadow-lg z-50 sticky top-0">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-shopping-bag text-2xl text-accent"></i>
                <h1 class="text-xl font-bold">小镇商店</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="../../index.html" class="text-white hover:text-secondary transition-colors">首页</a>
                <a href="shop.html" class="text-accent font-medium">商店</a>
                <a href="points.html" class="text-white hover:text-secondary transition-colors">积分中心</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索商品" class="pl-10 pr-4 py-2 rounded-full border border-secondary focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent w-48 md:w-64 bg-white/90 text-dark">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <button id="cart-btn" class="relative p-2 text-white hover:text-accent transition-colors">
                    <i class="fa fa-shopping-cart text-xl"></i>
                    <span id="cart-count" class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">0</span>
                </button>
                
                <!-- 用户信息显示已移除 -->
                
                <button id="mobile-menu-btn" class="md:hidden p-2 text-white hover:text-accent transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white/95 border-t shadow-md">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="../../index.html" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">
                    <i class="fa fa-home mr-2"></i>首页
                </a>
                <a href="shop.html" class="text-primary font-medium py-2 border-b border-gray-100">
                    <i class="fa fa-shopping-bag mr-2"></i>商店
                </a>
                <a href="points.html" class="text-dark hover:text-primary transition-colors py-2 border-b border-gray-100">
                    <i class="fa fa-diamond mr-2"></i>积分中心
                </a>
                <div class="relative py-2">
                    <input type="text" placeholder="搜索商品" class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 面包屑导航 - PC端显示，移动端隐藏 -->
    <div class="bg-white/95 border-b shadow-sm hidden md:block">
        <div class="container mx-auto px-4 py-2">
            <div class="flex items-center text-sm">
                <a href="../../index.html" class="text-gray-500 hover:text-primary transition-colors flex items-center">
                    <i class="fa fa-home mr-1"></i>小镇首页
                </a>
                <i class="fa fa-angle-right text-gray-400 mx-2"></i>
                <span class="text-primary font-medium flex items-center">
                    <i class="fa fa-shopping-bag mr-1"></i>小镇商店
                </span>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <main class="flex-1 py-4 pb-20 z-10 relative">
        <div class="container mx-auto px-4">
            <!-- 横向分类快捷导航 - 移动端和PC端都显示 -->
            <div class="mb-4 overflow-x-auto hide-scrollbar">
                <div class="flex space-x-2 md:justify-center py-2" id="category-tabs">
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-primary text-white shadow-md text-sm flex items-center" data-category="all">
                        <i class="fa fa-list-ul mr-1"></i>全部
                    </button>
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-white/90 hover:bg-primary/5 text-dark shadow-sm text-sm flex items-center" data-category="electronics">
                        <i class="fa fa-mobile mr-1"></i>电子产品
                    </button>
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-white/90 hover:bg-primary/5 text-dark shadow-sm text-sm flex items-center" data-category="clothing">
                        <i class="fa fa-shopping-bag mr-1"></i>服装配饰
                    </button>
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-white/90 hover:bg-primary/5 text-dark shadow-sm text-sm flex items-center" data-category="home">
                        <i class="fa fa-home mr-1"></i>家居生活
                    </button>
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-white/90 hover:bg-primary/5 text-dark shadow-sm text-sm flex items-center" data-category="beauty">
                        <i class="fa fa-heart mr-1"></i>美妆个护
                    </button>
                    <button class="px-3 py-2 whitespace-nowrap rounded-full bg-white/90 hover:bg-primary/5 text-dark shadow-sm text-sm flex items-center" data-category="food">
                        <i class="fa fa-cutlery mr-1"></i>食品饮料
                    </button>
                </div>
            </div>

            <div class="flex flex-col md:flex-row gap-4">
                <!-- 商品主区域 -->
                <div class="flex-1 order-2 md:order-1">
                    <!-- 筛选和排序 -->
                    <div class="bg-white/95 backdrop-blur-sm rounded-xl shadow-md p-3 mb-4">
                        <div class="flex justify-between items-center gap-2">
                            <div class="text-sm text-gray-600">
                                共 <span id="total-products" class="text-primary font-medium">0</span> 件商品
                            </div>
                            <div class="flex items-center gap-2">
                                <button id="filter-btn" class="md:hidden flex items-center px-3 py-1.5 rounded-lg border border-gray-200 text-sm">
                                    <i class="fa fa-filter mr-1 text-primary"></i>筛选
                                </button>
                                <div class="flex items-center">
                                    <select id="sort-select" class="text-sm border border-secondary rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white/90">
                                        <option value="default">默认排序</option>
                                        <option value="points-asc">积分↑</option>
                                        <option value="points-desc">积分↓</option>
                                        <option value="popularity">人气</option>
                                        <option value="newest">最新</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 商品列表 -->
                    <div id="products-grid" class="grid product-grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-3 md:gap-4">
                        <!-- 商品将通过 JavaScript 动态生成 -->
                    </div>
                    
                    <!-- 加载更多 -->
                    <div class="mt-6 text-center">
                        <button id="load-more-btn" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md">
                            <i class="fa fa-refresh mr-2"></i>加载更多
                        </button>
                    </div>
                </div>

                <!-- 侧边筛选器 - PC端显示，移动端隐藏 -->
                <div class="md:w-60 lg:w-64 order-1 md:order-2 hidden md:block">
                    <div class="bg-white/95 backdrop-blur-sm rounded-xl shadow-md p-4 sticky top-24">
                        <!-- 侧边栏分类 - 仅PC端显示，移动端已有顶部分类 -->
                        <div class="hidden md:block">
                            <h3 class="text-lg font-bold mb-3 flex items-center">
                                <i class="fa fa-th-large text-accent mr-2"></i>
                                商品分类
                            </h3>
                            <ul class="space-y-1 mb-5" id="category-list">
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors category-item-active" data-category="all">
                                        <i class="fa fa-list-ul mr-2"></i>全部分类
                                    </button>
                                </li>
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors hover:bg-primary/5" data-category="electronics">
                                        <i class="fa fa-mobile mr-2"></i>电子产品
                                    </button>
                                </li>
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors hover:bg-primary/5" data-category="clothing">
                                        <i class="fa fa-shopping-bag mr-2"></i>服装配饰
                                    </button>
                                </li>
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors hover:bg-primary/5" data-category="home">
                                        <i class="fa fa-home mr-2"></i>家居生活
                                    </button>
                                </li>
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors hover:bg-primary/5" data-category="beauty">
                                        <i class="fa fa-heart mr-2"></i>美妆个护
                                    </button>
                                </li>
                                <li>
                                    <button class="w-full text-left px-3 py-2 rounded-lg transition-colors hover:bg-primary/5" data-category="food">
                                        <i class="fa fa-cutlery mr-2"></i>食品饮料
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- 积分筛选 -->
                        <div>
                            <h3 class="text-lg font-bold mb-3 flex items-center">
                                <i class="fa fa-filter text-accent mr-2"></i>
                                积分筛选
                            </h3>
                            <div class="space-y-2">
                                <label class="flex items-center">
                                    <input type="radio" name="points-filter" value="all" checked class="text-primary focus:ring-primary">
                                    <span class="ml-2 text-sm">全部积分</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="points-filter" value="0-1000" class="text-primary focus:ring-primary">
                                    <span class="ml-2 text-sm">1000积分以下</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="points-filter" value="1000-5000" class="text-primary focus:ring-primary">
                                    <span class="ml-2 text-sm">1000-5000积分</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="points-filter" value="5000-10000" class="text-primary focus:ring-primary">
                                    <span class="ml-2 text-sm">5000-10000积分</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="radio" name="points-filter" value="10000+" class="text-primary focus:ring-primary">
                                    <span class="ml-2 text-sm">10000积分以上</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 移动端筛选抽屉菜单 -->
    <div id="filter-drawer" class="fixed inset-0 bg-dark/70 z-50 hidden">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-h-[80vh] overflow-y-auto">
            <div class="sticky top-0 bg-primary/95 text-white p-4 flex justify-between items-center shadow-md">
                <h3 class="font-bold">筛选选项</h3>
                <button id="close-filter" class="p-2">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-4">
                <h4 class="font-medium mb-3 text-dark">积分筛选</h4>
                <div class="space-y-3 mb-6">
                    <label class="flex items-center">
                        <input type="radio" name="mobile-points-filter" value="all" checked class="text-primary focus:ring-primary">
                        <span class="ml-2">全部积分</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="mobile-points-filter" value="0-1000" class="text-primary focus:ring-primary">
                        <span class="ml-2">1000积分以下</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="mobile-points-filter" value="1000-5000" class="text-primary focus:ring-primary">
                        <span class="ml-2">1000-5000积分</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="mobile-points-filter" value="5000-10000" class="text-primary focus:ring-primary">
                        <span class="ml-2">5000-10000积分</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="mobile-points-filter" value="10000+" class="text-primary focus:ring-primary">
                        <span class="ml-2">10000积分以上</span>
                    </label>
                </div>

                <div class="flex gap-3 mt-4">
                    <button id="reset-filters" class="flex-1 border border-gray-300 rounded-lg py-2">重置</button>
                    <button id="apply-filters" class="flex-1 bg-primary text-white rounded-lg py-2">应用筛选</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 购物车弹窗 -->
    <div id="cart-modal" class="fixed inset-0 bg-dark/70 z-50 hidden flex items-end justify-center">
        <div class="bg-white/95 backdrop-blur-sm w-full max-w-3xl rounded-t-2xl shadow-2xl transform transition-transform duration-300 max-h-[80vh] overflow-hidden flex flex-col">
            <div class="p-5 border-b flex justify-between items-center sticky top-0 bg-primary/95 text-white z-10">
                <h3 class="font-bold text-lg flex items-center">
                    <i class="fa fa-shopping-cart mr-2"></i>
                    我的购物车
                </h3>
                <div class="flex items-center gap-3">
                    <button id="clear-cart-button" class="px-3 py-1 bg-danger/70 hover:bg-danger text-white rounded-md text-sm transition-colors hidden">
                        <i class="fa fa-trash mr-1"></i>清空
                    </button>
                    <button id="close-cart" class="p-2 text-white/80 hover:text-white transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <div id="cart-items" class="flex-1 overflow-y-auto p-5">
                <!-- 购物车为空时显示 -->
                <div id="cart-empty" class="text-center py-10">
                    <i class="fa fa-shopping-cart text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 mb-4">购物车还是空的哦</p>
                    <a href="shop.html" class="inline-block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md">
                        <i class="fa fa-shopping-bag mr-1"></i>去逛逛
                    </a>
                </div>
                
                <!-- 购物车商品列表 -->
                <div id="cart-items-list" class="space-y-4 hidden">
                    <!-- 购物车商品将通过 JavaScript 动态生成 -->
                </div>
            </div>
            
            <div class="p-5 border-t bg-secondary/20 sticky bottom-0">
                <div class="flex justify-between items-center mb-4">
                    <div class="text-sm text-gray-600">
                        共 <span id="cart-items-count">0</span> 件商品
                    </div>
                    <div class="text-right">
                        <div class="text-sm text-gray-600">
                            总计积分：
                            <span id="cart-total-points" class="text-primary font-bold text-xl">0</span>
                        </div>
                    </div>
                </div>
                <button id="checkout-btn" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-md" disabled>
                    <i class="fa fa-check-circle mr-1"></i> 确认兑换
                </button>
            </div>
        </div>
    </div>

    <!-- 通知弹窗 -->
    <div id="notification" class="fixed bottom-16 md:bottom-6 right-6 bg-dark text-white p-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notification-icon" class="fa fa-info-circle mr-2 text-accent"></i>
        <span id="notification-title" class="font-bold mr-2"></span>
        <span id="notification-message">通知消息</span>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark/90 text-white py-8 md:py-12 mt-6 relative z-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-home text-accent text-2xl"></i>
                        <span class="text-xl font-bold">镇长日志</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">《镇长日志》是一款模拟经营游戏，玩家将作为小镇的镇长，带领村民们建设繁荣的城镇，体验小镇发展的快乐。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-accent transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-accent transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-accent transition-colors">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">游戏导航</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="../../index.html" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>小镇首页
                        </a></li>
                        <li><a href="shop.html" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>小镇商店
                        </a></li>
                        <li><a href="points.html" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>积分中心
                        </a></li>
                        <li><a href="../user/user-center.html" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>个人中心
                        </a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">游戏指南</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>新手教程
                        </a></li>
                        <li><a href="#" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>游戏规则
                        </a></li>
                        <li><a href="#" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>常见问题
                        </a></li>
                        <li><a href="#" class="hover:text-accent transition-colors flex items-center">
                            <i class="fa fa-angle-right mr-2 text-xs"></i>联系我们
                        </a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">官方信息</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-accent"></i>
                            <span>快乐小镇游戏工作室</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o mr-3 text-accent"></i>
                            <span>运营时间: 09:00-21:00</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-accent"></i>
                            <span>support@mayor-log.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 md:mt-8 pt-6 md:pt-8 text-center text-gray-500 text-sm">
                <p>© 2025 镇长日志. 保留所有权利。</p>
            </div>
        </div>
    </footer>
    
    <!-- 底部导航栏 -->
    <div id="bottom-navbar" class="fixed bottom-0 left-0 right-0 bg-white/95 shadow-lg border-t border-gray-200 z-50 backdrop-blur-sm">
        <div class="flex justify-around items-center">
            <a href="../../index.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="../games/games_list.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </a>
            <a href="shop.html" class="flex flex-col items-center py-3 px-6 text-primary relative">
                <i class="fa fa-shopping-bag text-xl mb-1"></i>
                <span class="text-xs font-medium">商店</span>
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-primary rounded-t-full"></span>
            </a>
            <a href="../user/user-center.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>

    <!-- 工具函数已在页面头部内联实现 -->
    <script>
        // 商品数据
        const products = [
            {
                id: '1',
                name: '蓝牙耳机',
                description: '高清音质，无线连接，舒适佩戴',
                points: 1200,
                category: 'electronics',
                image: 'https://picsum.photos/seed/headphone1/300/300',
                popularity: 95,
                stock: 50,
                isNew: true
            },
            {
                id: '2',
                name: '智能手表',
                description: '健康监测，运动追踪，长续航',
                points: 3500,
                category: 'electronics',
                image: 'https://picsum.photos/seed/watch1/300/300',
                popularity: 88,
                stock: 30,
                isNew: true
            },
            {
                id: '3',
                name: '时尚背包',
                description: '大容量，防水材质，多隔层设计',
                points: 850,
                category: 'clothing',
                image: 'https://picsum.photos/seed/bag1/300/300',
                popularity: 75,
                stock: 40,
                isNew: false
            },
            {
                id: '4',
                name: '保温水杯',
                description: '304不锈钢，24小时保温，大容量',
                points: 500,
                category: 'home',
                image: 'https://picsum.photos/seed/cup1/300/300',
                popularity: 90,
                stock: 100,
                isNew: false
            },
            {
                id: '5',
                name: '护肤套装',
                description: '天然成分，温和不刺激，深层滋养',
                points: 2500,
                category: 'beauty',
                image: 'https://picsum.photos/seed/skincare1/300/300',
                popularity: 82,
                stock: 25,
                isNew: true
            },
            {
                id: '6',
                name: '进口巧克力礼盒',
                description: '比利时进口，多种口味，精美包装',
                points: 680,
                category: 'food',
                image: 'https://picsum.photos/seed/chocolate1/300/300',
                popularity: 78,
                stock: 60,
                isNew: false
            },
            {
                id: '7',
                name: '无线充电器',
                description: '15W快充，多设备兼容，智能识别',
                points: 799,
                category: 'electronics',
                image: 'https://picsum.photos/seed/charger1/300/300',
                popularity: 85,
                stock: 80,
                isNew: false
            },
            {
                id: '8',
                name: '时尚太阳镜',
                description: '防紫外线，轻量材质，时尚设计',
                points: 1100,
                category: 'clothing',
                image: 'https://picsum.photos/seed/glasses1/300/300',
                popularity: 70,
                stock: 45,
                isNew: true
            },
            {
                id: '9',
                name: '香薰蜡烛',
                description: '天然大豆蜡，持久留香，舒缓心情',
                points: 450,
                category: 'home',
                image: 'https://picsum.photos/seed/candle1/300/300',
                popularity: 88,
                stock: 70,
                isNew: false
            },
            {
                id: '10',
                name: '运动鞋',
                description: '轻便舒适，透气网面，减震鞋底',
                points: 2200,
                category: 'clothing',
                image: 'https://picsum.photos/seed/shoes1/300/300',
                popularity: 92,
                stock: 35,
                isNew: false
            },
            {
                id: '11',
                name: '咖啡机',
                description: '意式浓缩，一键操作，小巧精致',
                points: 5800,
                category: 'home',
                image: 'https://picsum.photos/seed/coffee1/300/300',
                popularity: 65,
                stock: 15,
                isNew: true
            },
            {
                id: '12',
                name: '坚果礼盒',
                description: '精选坚果，营养丰富，休闲零食',
                points: 850,
                category: 'food',
                image: 'https://picsum.photos/seed/nuts1/300/300',
                popularity: 79,
                stock: 50,
                isNew: false
            }
        ];

        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // 购物车弹窗
        const cartBtn = document.getElementById('cart-btn');
        const cartModal = document.getElementById('cart-modal');
        const closeCart = document.getElementById('close-cart');
        const cartItems = document.getElementById('cart-items');
        const cartEmpty = document.getElementById('cart-empty');
        const cartItemsList = document.getElementById('cart-items-list');
        const cartItemsCount = document.getElementById('cart-items-count');
        const cartTotalPoints = document.getElementById('cart-total-points');
        const checkoutBtn = document.getElementById('checkout-btn');
        const cartCount = document.getElementById('cart-count');
        
        if (cartBtn && cartModal) {
            cartBtn.addEventListener('click', () => {
                // 更新购物车内容
                updateCartDisplay();
                // 显示购物车弹窗
                cartModal.classList.remove('hidden');
            });
        }
        
        if (closeCart && cartModal) {
            closeCart.addEventListener('click', () => {
                cartModal.classList.add('hidden');
            });
        }
        
        if (cartModal) {
            cartModal.addEventListener('click', (e) => {
                if (e.target === cartModal) {
                    cartModal.classList.add('hidden');
                }
            });
        }

        // 用户菜单
        const userMenuBtn = document.getElementById('user-menu-btn');
        const userDropdown = document.getElementById('user-dropdown');
        const loginRegister = document.getElementById('login-register');
        const userInfo = document.getElementById('user-info');
        const userName = document.getElementById('user-name');
        const avatarPlaceholder = document.getElementById('avatar-placeholder');
        const userAvatar = document.getElementById('user-avatar');
        const dropdownUsername = document.getElementById('dropdown-username');
        const dropdownUserpoints = document.getElementById('dropdown-userpoints');
        const logoutBtn = document.getElementById('logout-btn');
        
        if (userMenuBtn && userDropdown) {
            userMenuBtn.addEventListener('click', () => {
                userDropdown.classList.toggle('hidden');
            });
        }
        
        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (userDropdown && !userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                userDropdown.classList.add('hidden');
            }
        });
        
        // 检查用户登录状态
        function updateUserDisplay() {
            const userInfoData = getUserInfo();
            if (userInfoData) {
                // 用户已登录
                if (loginRegister) loginRegister.classList.add('hidden');
                if (userInfo) userInfo.classList.remove('hidden');
                if (userName) userName.textContent = userInfoData.username;
                if (userAvatar) userAvatar.src = userInfoData.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${userInfoData.username}`;
                if (dropdownUsername) dropdownUsername.textContent = userInfoData.username;
                if (dropdownUserpoints) dropdownUserpoints.textContent = `积分: ${userInfoData.points || 0}`;
                if (avatarPlaceholder) avatarPlaceholder.innerHTML = `<img src="${userInfoData.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${userInfoData.username}`}" alt="用户头像" class="w-full h-full rounded-full object-cover">`;
            } else {
                // 用户未登录
                if (loginRegister) loginRegister.classList.remove('hidden');
                if (userInfo) userInfo.classList.add('hidden');
                if (userName) userName.textContent = '登录/注册';
                if (avatarPlaceholder) avatarPlaceholder.innerHTML = '<i class="fa fa-user text-gray-500"></i>';
            }
        }
        
        // 退出登录
        if (logoutBtn) {
            logoutBtn.addEventListener('click', () => {
                logout();
                updateUserDisplay();
                showNotification('您已成功退出登录', '', 'info');
            });
        }

        // 分类筛选 - 侧边栏和顶部标签页共享功能
        const categoryList = document.getElementById('category-list');
        const categoryTabs = document.getElementById('category-tabs');
        
        // 设置分类的激活状态
        function setCategoryActive(category) {
            // 侧边栏分类
            if (categoryList) {
                categoryList.querySelectorAll('[data-category]').forEach(item => {
                    if (item.dataset.category === category) {
                        item.classList.add('category-item-active');
                    } else {
                        item.classList.remove('category-item-active');
                    }
                });
            }
            
            // 顶部标签页分类
            if (categoryTabs) {
                categoryTabs.querySelectorAll('[data-category]').forEach(item => {
                    if (item.dataset.category === category) {
                        item.classList.add('bg-primary', 'text-white', 'shadow-md');
                        item.classList.remove('bg-white/90', 'text-dark', 'hover:bg-primary/5', 'shadow-sm');
                    } else {
                        item.classList.remove('bg-primary', 'text-white', 'shadow-md');
                        item.classList.add('bg-white/90', 'text-dark', 'hover:bg-primary/5', 'shadow-sm');
                    }
                });
            }
            
            // 重新渲染商品
            renderProducts();
        }
        
        // 侧边栏分类点击事件
        if (categoryList) {
            categoryList.addEventListener('click', (e) => {
                if (e.target.closest('[data-category]')) {
                    const category = e.target.closest('[data-category]').dataset.category;
                    setCategoryActive(category);
                }
            });
        }
        
        // 顶部标签页分类点击事件
        if (categoryTabs) {
            categoryTabs.addEventListener('click', (e) => {
                if (e.target.closest('[data-category]')) {
                    const category = e.target.closest('[data-category]').dataset.category;
                    setCategoryActive(category);
                }
            });
        }

        // 积分筛选 - 包括PC端和移动端
        const pointsFilters = document.querySelectorAll('input[name="points-filter"]');
        const mobilePointsFilters = document.querySelectorAll('input[name="mobile-points-filter"]');
        
        // 设置相同的筛选值
        function syncFilters(value) {
            pointsFilters.forEach(filter => {
                if (filter.value === value) filter.checked = true;
            });
            
            mobilePointsFilters.forEach(filter => {
                if (filter.value === value) filter.checked = true;
            });
        }
        
        // PC端筛选变更事件
        pointsFilters.forEach(filter => {
            filter.addEventListener('change', () => {
                if (filter.checked) {
                    syncFilters(filter.value);
                    renderProducts();
                }
            });
        });
        
        // 移动端应用筛选按钮
        const applyFiltersBtn = document.getElementById('apply-filters');
        if (applyFiltersBtn) {
            applyFiltersBtn.addEventListener('click', () => {
                const selectedFilter = document.querySelector('input[name="mobile-points-filter"]:checked');
                if (selectedFilter) {
                    syncFilters(selectedFilter.value);
                    renderProducts();
                    document.getElementById('filter-drawer').classList.add('hidden');
                }
            });
        }
        
        // 移动端重置筛选按钮
        const resetFiltersBtn = document.getElementById('reset-filters');
        if (resetFiltersBtn) {
            resetFiltersBtn.addEventListener('click', () => {
                syncFilters('all');
                renderProducts();
            });
        }

        // 排序
        const sortSelect = document.getElementById('sort-select');
        if (sortSelect) {
            sortSelect.addEventListener('change', () => {
                renderProducts();
            });
        }

        // 加载更多
        const loadMoreBtn = document.getElementById('load-more-btn');
        let currentPage = 1;
        const productsPerPage = 9;
        
        if (loadMoreBtn) {
            loadMoreBtn.addEventListener('click', () => {
                currentPage++;
                renderProducts(true);
            });
        }

        // 渲染商品
        function renderProducts(append = false) {
            const selectedCategory = (categoryList && categoryList.querySelector('[data-category].category-item-active')) ? 
                categoryList.querySelector('[data-category].category-item-active').dataset.category : 
                categoryTabs.querySelector('[data-category].bg-primary').dataset.category;
                
            const selectedPointsFilter = document.querySelector('input[name="points-filter"]:checked').value;
            const sortBy = sortSelect.value;
            
            // 过滤商品
            let filteredProducts = products.filter(product => {
                // 分类过滤
                if (selectedCategory !== 'all' && product.category !== selectedCategory) {
                    return false;
                }
                
                // 积分过滤
                const points = product.points;
                switch (selectedPointsFilter) {
                    case '0-1000':
                        return points < 1000;
                    case '1000-5000':
                        return points >= 1000 && points < 5000;
                    case '5000-10000':
                        return points >= 5000 && points < 10000;
                    case '10000+':
                        return points >= 10000;
                    default:
                        return true;
                }
            });
            
            // 排序商品
            switch (sortBy) {
                case 'points-asc':
                    filteredProducts.sort((a, b) => a.points - b.points);
                    break;
                case 'points-desc':
                    filteredProducts.sort((a, b) => b.points - a.points);
                    break;
                case 'popularity':
                    filteredProducts.sort((a, b) => b.popularity - a.popularity);
                    break;
                case 'newest':
                    filteredProducts.sort((a, b) => b.isNew - a.isNew);
                    break;
                default:
                    // 默认排序
                    break;
            }
            
            // 更新总数
            const totalProductsElement = document.getElementById('total-products');
            if (totalProductsElement) {
                totalProductsElement.textContent = filteredProducts.length;
            }
            
            // 分页
            const startIndex = (currentPage - 1) * productsPerPage;
            const endIndex = startIndex + productsPerPage;
            const paginatedProducts = filteredProducts.slice(startIndex, endIndex);
            
            // 检查是否还有更多商品
            if (endIndex >= filteredProducts.length && loadMoreBtn) {
                loadMoreBtn.disabled = true;
                loadMoreBtn.innerHTML = '<i class="fa fa-check mr-2"></i>没有更多了';
                loadMoreBtn.classList.add('bg-gray-200', 'text-gray-500');
                loadMoreBtn.classList.remove('border-primary', 'text-primary', 'hover:bg-primary/5');
            } else if (loadMoreBtn) {
                loadMoreBtn.disabled = false;
                loadMoreBtn.innerHTML = '<i class="fa fa-refresh mr-2"></i>加载更多';
                loadMoreBtn.classList.remove('bg-gray-200', 'text-gray-500');
                loadMoreBtn.classList.add('border-primary', 'text-primary', 'hover:bg-primary/5');
            }
            
            const productsGrid = document.getElementById('products-grid');
            if (productsGrid) {
                if (!append) {
                    productsGrid.innerHTML = '';
                }
                
                    paginatedProducts.forEach(product => {
                    const productCard = document.createElement('div');
                    productCard.className = 'bg-white/95 backdrop-blur-sm rounded-lg shadow-sm overflow-hidden card-hover';
                    productCard.innerHTML = `
                        <div class="relative">
                            <img src="${product.image}" alt="${product.name}" class="w-full h-36 sm:h-40 object-cover">
                            ${product.isNew ? '<span class="absolute top-2 left-2 bg-danger text-white text-xs px-2 py-1 rounded-md shadow-sm">新品</span>' : ''}
                            ${product.popularity >= 90 ? '<span class="absolute top-2 right-2 bg-warning text-white text-xs px-2 py-1 rounded-md shadow-sm">热销</span>' : ''}
                        </div>
                        <div class="p-3">
                            <h3 class="font-medium text-dark mb-1 text-sm md:text-base line-clamp-1">${product.name}</h3>
                            <p class="text-gray-600 text-xs md:text-sm mb-2 line-clamp-2">${product.description}</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-1 bg-secondary/20 px-2 py-1 rounded-full">
                                    <i class="fa fa-diamond text-accent text-xs"></i>
                                    <span class="text-primary font-bold text-sm">${product.points}</span>
                                </div>
                                <button class="add-to-cart-btn px-2 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-xs md:text-sm shadow-sm" data-id="${product.id}">
                                    <i class="fa fa-shopping-cart mr-1"></i>加入
                                </button>
                            </div>
                        </div>
                    `;
                    
                    productsGrid.appendChild(productCard);
                });
                
                // 为新添加的按钮绑定事件
                document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const productId = this.getAttribute('data-id');
                        const product = products.find(p => p.id === productId);
                        if (product) {
                            // 检查用户是否已登录
                            const userInfoData = getUserInfo();
                            if (!userInfoData) {
                                // 用户未登录，显示提示
                                showNotification('您需要先登录才能添加商品到购物车', '', 'warning');
                                // 延迟跳转到登录页面
                                setTimeout(() => {
                                    window.location.href = 'login.html';
                                }, 1500);
                            } else {
                                // 用户已登录，添加到购物车
                                addToCart(product);
                                showNotification(`${product.name} 已添加到购物车`, '', 'success');
                            }
                        }
                    });
                });
            }
        }

        // 更新购物车显示
        function updateCartDisplay() {
            const cartData = getCart();
            const userInfoData = getUserInfo();
            
            // 直接获取所有需要的元素
            const cartCount = document.getElementById('cart-count');
            const cartItemsList = document.getElementById('cart-items-list');
            const cartEmpty = document.getElementById('cart-empty');
            const cartItemsCount = document.getElementById('cart-items-count');
            const cartTotalPoints = document.getElementById('cart-total-points');
            const checkoutBtn = document.getElementById('checkout-btn');
            
            // 更新购物车数量标记
            if (cartCount) {
                cartCount.textContent = cartData.length;
                if (cartData.length === 0) {
                    cartCount.classList.add('hidden');
                } else {
                    cartCount.classList.remove('hidden');
                }
            }
            
            // 更新购物车内容
            if (cartItemsList && cartEmpty && cartItemsCount && cartTotalPoints && checkoutBtn) {
                if (cartData.length === 0) {
                    cartItemsList.classList.add('hidden');
                    cartEmpty.classList.remove('hidden');
                    cartItemsCount.textContent = 0;
                    cartTotalPoints.textContent = 0;
                    checkoutBtn.disabled = true;
                } else {
                    cartItemsList.classList.remove('hidden');
                    cartEmpty.classList.add('hidden');
                    
                    // 清空购物车列表
                    cartItemsList.innerHTML = '';
                    
                    let totalPoints = 0;
                    
                    // 添加购物车商品
                    cartData.forEach(item => {
                        const product = products.find(p => p.id === item.id);
                        // 确保商品存在，不存在时使用默认值显示
                        if (product) {
                            totalPoints += (product.points || 0) * (item.quantity || 1);
                            
                            const cartItem = document.createElement('div');
                            cartItem.className = 'flex items-start border-b border-gray-200/60 pb-4 mb-4';
                            cartItem.innerHTML = `
                                <div class="w-20 h-20 rounded-lg overflow-hidden shadow-sm">
                                    <img src="${product.image || 'default-avatar.svg'}" alt="${product.name || '商品'}" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium text-dark line-clamp-1">${product.name}</h4>
                                    <p class="text-gray-600 text-xs mt-1">积分: <span class="text-primary font-medium">${product.points}</span></p>
                                    <div class="flex items-center justify-between mt-3">
                                        <div class="flex items-center border border-secondary/30 rounded-lg shadow-sm bg-white">
                                            <button class="decrease-quantity px-2 py-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                                <i class="fa fa-minus text-xs"></i>
                                            </button>
                                            <span class="px-2 py-1 min-w-8 text-center font-medium">${item.quantity}</span>
                                            <button class="increase-quantity px-2 py-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                                <i class="fa fa-plus text-xs"></i>
                                            </button>
                                        </div>
                                        <button class="remove-from-cart text-danger hover:text-danger/80 bg-danger/10 p-2 rounded-full" data-id="${item.id}">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                            
                            cartItemsList.appendChild(cartItem);
                        } else {
                            // 处理商品不存在的情况，避免显示NaN
                            totalPoints += 0;
                            
                            const cartItem = document.createElement('div');
                            cartItem.className = 'flex items-start border-b border-gray-200/60 pb-4 mb-4';
                            cartItem.innerHTML = `
                                <div class="w-20 h-20 rounded-lg overflow-hidden shadow-sm bg-gray-100">
                                    <img src="default-avatar.svg" alt="未知商品" class="w-full h-full object-cover">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium text-dark line-clamp-1">未知商品</h4>
                                    <p class="text-gray-600 text-xs mt-1">积分: <span class="text-primary font-medium">0</span></p>
                                    <div class="flex items-center justify-between mt-3">
                                        <div class="flex items-center border border-secondary/30 rounded-lg shadow-sm bg-white">
                                            <button class="decrease-quantity px-2 py-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                                <i class="fa fa-minus text-xs"></i>
                                            </button>
                                            <span class="px-2 py-1 min-w-8 text-center font-medium">${item.quantity || 1}</span>
                                            <button class="increase-quantity px-2 py-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                                <i class="fa fa-plus text-xs"></i>
                                            </button>
                                        </div>
                                        <button class="remove-from-cart text-danger hover:text-danger/80 bg-danger/10 p-2 rounded-full" data-id="${item.id}">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                            
                            cartItemsList.appendChild(cartItem);
                        }
                    });
                    
                    // 更新数量和总价，确保显示正确的数值而非NaN
                    cartItemsCount.textContent = cartData.reduce((sum, item) => sum + (item.quantity || 1), 0);
                    cartTotalPoints.textContent = isNaN(totalPoints) ? 0 : totalPoints;
                    
                    // 检查是否可以结算
                    checkoutBtn.disabled = !userInfoData;
                    
                    // 如果用户未登录，更新结算按钮文本
                    if (!userInfoData) {
                        checkoutBtn.textContent = '请先登录';
                    } else {
                        checkoutBtn.textContent = '去结算';
                    }
                    
                    // 确保购物车不为空时显示清空按钮
                    const clearCartBtn = document.getElementById('clear-cart-button');
                    if (clearCartBtn) {
                        clearCartBtn.style.display = cartData.length > 0 ? 'block' : 'none';
                    }
                    
                    // 为购物车内的按钮绑定事件
                    document.querySelectorAll('.decrease-quantity').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            decreaseQuantity(productId);
                            updateCartDisplay();
                        });
                    });
                    
                    document.querySelectorAll('.increase-quantity').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            const product = products.find(p => p.id === productId);
                            if (product) {
                                const cart = getCart();
                                const item = cart.find(i => i.id === productId);
                                if (item && item.quantity >= product.stock) {
                                    showNotification(`该商品库存仅剩 ${product.stock} 件`, '', 'warning');
                                    return;
                                }
                                increaseQuantity(productId);
                                updateCartDisplay();
                            }
                        });
                    });
                    
                    document.querySelectorAll('.remove-from-cart').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const productId = this.getAttribute('data-id');
                            const removed = removeFromCart(productId);
                            updateCartDisplay();
                            
                            // 根据删除结果显示不同的通知
                            if (removed) {
                                showNotification('已从购物车移除商品', '', 'info');
                            } else {
                                showNotification('该商品不在购物车中', '', 'warning');
                            }
                        });
                    });
                }
            }
        }

        // 显示通知的函数
        function showNotification(title, message = '', type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-y-[-20px] opacity-0`;
            
            // 根据类型设置样式
            let bgColor, textColor, icon;
            switch(type) {
                case 'success':
                    bgColor = 'bg-green-500';
                    textColor = 'text-white';
                    icon = 'fa-check-circle';
                    break;
                case 'error':
                    bgColor = 'bg-red-500';
                    textColor = 'text-white';
                    icon = 'fa-exclamation-circle';
                    break;
                case 'warning':
                    bgColor = 'bg-yellow-500';
                    textColor = 'text-white';
                    icon = 'fa-exclamation-triangle';
                    break;
                default:
                    bgColor = 'bg-blue-500';
                    textColor = 'text-white';
                    icon = 'fa-info-circle';
            }
            
            notification.classList.add(...bgColor.split(' '), ...textColor.split(' '));
            
            // 设置内容
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fa ${icon} mr-2"></i>
                    <div>
                        <strong class="font-medium">${title}</strong>
                        ${message ? `<p class="text-sm opacity-90">${message}</p>` : ''}
                    </div>
                </div>
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示动画
            setTimeout(() => {
                notification.classList.remove('translate-y-[-20px]', 'opacity-0');
                notification.classList.add('translate-y-0', 'opacity-100');
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                notification.classList.remove('translate-y-0', 'opacity-100');
                notification.classList.add('translate-y-[-20px]', 'opacity-0');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 去结算
        if (checkoutBtn) {
            checkoutBtn.addEventListener('click', () => {
                const userInfoData = getUserInfo();
                if (userInfoData) {
                    const cartData = getCart();
                    if (cartData.length > 0) {
                        // 计算总积分
                        let totalPoints = 0;
                        const items = [];
                        
                        // 遍历购物车商品
                        cartData.forEach(item => {
                            // 创建订单商品项
                            items.push({
                                id: item.id,
                                name: item.name,
                                points: item.points,
                                quantity: item.quantity,
                                image: item.image
                            });
                            // 计算总积分
                            totalPoints += item.points * item.quantity;
                        });
                        
                        // 检查用户积分是否足够
                        if ((userInfoData.points || 0) < totalPoints) {
                            showNotification('您的积分不足以完成此次兑换', '', 'error');
                            return;
                        }
                        
                        // 创建订单
                        const orderId = 'ORD' + Date.now() + Math.floor(Math.random() * 1000);
                        const newOrder = {
                            id: orderId,
                            userId: userInfoData.id,
                            items: items,
                            totalPoints: totalPoints,
                            status: 'pending', // 待处理
                            createdAt: new Date().toISOString()
                        };
                        
                        // 保存订单到localStorage
                        const orders = JSON.parse(localStorage.getItem('orders') || '[]');
                        orders.push(newOrder);
                        localStorage.setItem('orders', JSON.stringify(orders));
                        
                        // 扣除用户积分
                        userInfoData.points = (userInfoData.points || 0) - totalPoints;
                        setUserInfo(userInfoData);
                        
                        // 清空购物车
                        clearCart();
                        
                        // 显示成功通知
                        showNotification('您的订单已创建成功，请在订单页面查看详情', '', 'success');
                        
                        // 跳转到订单页面
                        setTimeout(() => {
                            window.location.href = 'orders.html';
                        }, 1500);
                    }
                } else {
                    // 跳转到登录页面
                    window.location.href = 'login.html';
                }
            });
        }

        // 移动端筛选抽屉菜单
        const filterBtn = document.getElementById('filter-btn');
        const filterDrawer = document.getElementById('filter-drawer');
        const closeFilterBtn = document.getElementById('close-filter');
        
        if (filterBtn && filterDrawer) {
            filterBtn.addEventListener('click', () => {
                filterDrawer.classList.remove('hidden');
            });
        }
        
        if (closeFilterBtn && filterDrawer) {
            closeFilterBtn.addEventListener('click', () => {
                filterDrawer.classList.add('hidden');
            });
        }
        
        if (filterDrawer) {
            filterDrawer.addEventListener('click', (e) => {
                if (e.target === filterDrawer) {
                    filterDrawer.classList.add('hidden');
                }
            });
        }
        
        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 渲染商品
            renderProducts();
            
            // 更新用户显示
            updateUserDisplay();
            
            // 更新购物车显示
            updateCartDisplay();
            
            // 为清空购物车按钮添加一次性事件监听器
            const clearCartBtn = document.getElementById('clear-cart-button');
            if (clearCartBtn) {
                clearCartBtn.addEventListener('click', function() {
                    if (confirm('确定要清空购物车吗？')) {
                        updateCart([]);
                        updateCartDisplay();
                        showNotification('购物车已清空', '', 'success');
                    }
                });
            }
        });
    </script>
</body>
</html>